<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 100%;height: 600px;"></div>
</body>
<script>
  var myChart = echarts.init(document.getElementById('main'));
  // 雷达图数据
  var itemArr = [96, 52, 18, 18, 18, 23];
  // 条目标签下标
  let i = 0;
  // 颜色级别常量
  const green ='#04BF00', yellow = '#BFA000', red = '#BF0000';
  // 拐点数据对象
  var pointObject = {};
  // 填充拐点数据
  itemArr.forEach((v, k) => {
    let itemNarray = ['','','','','',''];
    var itemNarrayN = itemNarray.map((e, i) => {
      if (i == k) {
        return v; 
      } else {
        return '';
      }
    });
    // 给拐点对象添加拐点数据属性
    pointObject['n'+(k+1)] = itemNarrayN;
  });
  // 拐点颜色函数
  function colorLevel(v) {
    let color = green;
    let itemValue = v.value.find(i => {
      return i != '';
    })
    if (itemValue >= 50) {
      // 大于50賦值黃色
      color = yellow;
    }
    if (itemValue >= 80) {
      // 大于50賦值紅色
      color = red;
    }
    return color;
  }
  // 填充拐点数据函数
  function point(nArr, zLevel, color = colorLevel) {
    return {
      name: '预算',
      type: 'radar',
      silent: true,
      // areaStyle: {normal: {}},
      data: [{
        value: nArr,
        name: '预算分配（Allocated Budget）',
        symbol: 'circle',
        symbolSize: 12
      },],
      itemStyle: {
        normal: {
          borderWidth: 8,
          color: color
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false //隐藏标示线
        }
      },
      Z: zLevel
    }
  }
  option = {
    title: {
      // text: '基础雷达图'
    },
    radar: {
      nameGap: 22,
      name: {
        textStyle: {
          color: 'black',
          padding: [3, 5]
        },
        rich: {
          a: {
            color: '#7D7777',
            fontSize: 18,
            fontFamily: 'Arial',
            align: 'middle',
          },
          l1: {
            color: green,
            fontSize: 22,
            align: 'center',
            verticalAlign: 'bottom',
            fontFamily: 'Arial',
            fontWeight: '800',
          },
          l2: {
            color: yellow,
            fontSize: 22,
            align: 'center',
            verticalAlign: 'bottom',
            fontFamily: 'Arial',
            fontWeight: '800',
          },
          l3: {
            color: red,
            fontSize: 22,
            align: 'center',
            verticalAlign: 'bottom',
            fontFamily: 'Arial',
            fontWeight: '800',
            padding: [0, 0, 0, 10]
          }
        },
        formatter: (value, indicator) => {
          // 通过下标找到对应的标签的值
          var percentage = itemArr[i];
          var levelColor = 'l1';
          if (percentage >= 50) {
            levelColor = 'l2';
          }
          if (percentage >= 80) {
            levelColor = 'l3';
          }
          if (i == 0) {
            // 如果是上面第一个就不换行
            i++;
            return `{a|${value}}{${levelColor}|${percentage}%}`;
          } else {
            i++;
            return `{a|${value}}\n{${levelColor}|${percentage}%}`;
          }
        },
      },
      indicator: [{
        name: 'Anthracnose',
        max: 100
      },
      {
        name: 'Brnow Patch',
        max: 100
      },
      {
        name: 'Dollar spot',
        max: 100
      },
      {
        name: 'Microdochium patch',
        max: 100
      },
      {
        name: 'Pythium blight',
        max: 100
      },
      {
        name: 'xxx',
        max: 100
      }
      ],
      splitNumber: 3,
      shape: 'circle',
      splitArea: {
        areaStyle: {
          color: ['#DAFADE', '#fff', '#FAECEC']
        }
      },
      // 比例值分割线设置
      splitLine: {
        show: false //隐藏
      }
    },
    series: [
      // 第一层画出折线
      {
        name: '预算',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [{
          value: itemArr,
          name: '预算分配（Allocated Budget）',
          symbol: 'circle'
        },],
        // 坐标轴静止无法交互
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 8,
            color: '#706D6D'
          }
        },
        lineStyle: {
          width: 4
        },
        Z: 1
      },
    ]
  };
  // 填充拐点
  for (let key in pointObject) {
    option.series.push(point(pointObject[key], key+1))
  }
  // 填充中心原点
  option.series.push(point([], 8, '#ccc'))
  myChart.setOption(option)
</script>
</html>